<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>接口调用</title>
   <link href="/webjars/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
   <link href="/webjars/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
    <script src="/webjars/jquery/3.4.1/jquery.min.js"></script>
    <script src="/webjars/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="/webjars/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="/webjars/bootstrap-datetimepicker/2.4.4/css/bootstrap-datetimepicker.min.css" ></script>
    <script src="/webjars/bootstrap-datetimepicker/2.4.4/js/bootstrap-datetimepicker.min.js" ></script>
    <script src="/webjars/bootstrap-datetimepicker/2.4.4/js/locales/bootstrap-datetimepicker.zh-CN.js" ></script>

</head>
<body>
<form class="" role="form" th:action="@{/getBaoHanInfo}" th:object="${getbaohaninfo}"   method="post">
    <div class="container">
        <div class="row" style="padding: 20px 0">
            <h3>请求参数</h3>
        </div>
        <div class="row" id="detailsrow">
            <div class="form-group col-lg-3">
                <div class="input-group">
                    <span class="input-group-addon">请求时间</span>
                    <input  id="timestamp" name="timestamp" class="form-control" placeholder="请选择日期" >
                </div>
            </div>
            <div class="form-group col-lg-3">
                <div class="input-group">
                    <span class="input-group-addon">业务流水号</span>
                    <input class="form-control" type="text" name="applyno" id="applyno" >
                </div>
            </div>
            <div class="form-group col-lg-3">
                <div class="input-group">
                    <span class="input-group-addon">保函编号</span>
                    <input class="form-control" type="text"  name="baohanno" id="baohanno">
                </div>
            </div>
            <div class="form-group col-lg-3">
                <div class="input-group">
                    <span class="input-group-addon">报文签名</span>
                    <input class="form-control" type="text"  name="sign" id="sign" >
                </div>
            </div>

            <div class="form-group col-lg-3">
                <div class="input-group">
                    <input type="submit" name="提交"/>
                </div>
            </div>

        </div>
    </div>
</form>
<div id="xinzeng">
    <div class="form-group col-lg-3" id="details" hidden>
        <div class="input-group">
            <span class="input-group-addon" id="detailspan"></span>
            <input class="form-control" type="text"  id="detailinput"  >
        </div>
    </div>
</div>

<div class="form-group col-lg-3" id="inputnew">
    <div class="input-group">
        <span class="input-group-addon" >新增字段中文名字</span>
        <input class="form-control" type="text"  id="inputnewspan"  >
        <span class="input-group-addon" >新增字段英文名字</span>
        <input class="form-control" type="text"  id="inputnewname"  >
    </div>
</div>

<div>
    <button id="fat-btn" class="btn btn-primary"
            type="button">添加
    </button>
</div>

<script>
    // $("#generatetime").datepicker({
    //     language: 'zh-CN', //语言
    //     autoclose: true, //选择后自动关闭
    //     clearBtn: true,//清除按钮
    //     format: "yyyy-mm-dd"//日期格式
    // });
    $("input[name='timestamp']").datetimepicker({
        language : 'zh-CN', // 语言
        autoclose : true, //  true:选择时间后窗口自动关闭
        format : 'yyyy-mm-dd hh:mm:ss', // 文本框时间格式，设置为0,最后时间格式为2017-03-23 17:00:00
        todayBtn : true, // 如果此值为true 或 "linked"，则在日期时间选择器组件的底部显示一个 "Today" 按钮用以选择当前日期。
        todayHighlight: 1//今天高亮
    })

    $(function() {
        var detail_div = 1;
        $("#fat-btn").click(function() {

            var spanvalue = $("#inputnewspan").val();
            var iputvalue = $("#inputnewname").val();
            alert(spanvalue)
            alert(iputvalue)
            var e = document.getElementById("details");
            var div = document.createElement("div");
            div.className = "form-group";
            $("#detailspan").html(spanvalue);
            $("#detailinput").attr("name", iputvalue);
            $("#detailinput").attr("id", iputvalue);
            div.id = "details" + detail_div;
            div.innerHTML = e.innerHTML;
            document.getElementById("detailsrow").appendChild(div);
            $("#xinzeng").find("input[type=text]").attr("id", "detailinput");
            $("#xinzeng").find("input[type=text]").attr("name", "detailinput");
            detail_div++;
        });

    });


</script>

</body>
</html>